<template>
	<view class="active-overview">
		<view class="ac-item" v-for="(item, inx) in activityList" :key="inx">
			<view class="info">
				<view class="user-info">
					<image class="head" :src="headHandle(item)" mode="aspectFill"></image>
					<view class="name-time">
						<text class="name">{{item.publicUserName}}</text>
						<text class="time">{{handleTime(item.update_time)}}</text>
					</view>
				</view>
			
			</view>
			<view class="content">
				<text class="cont-text">{{item.title}}</text>
				<view style="margin-top: 16rpx;" @click="activityAudit(item)">
					<text style="color: #28C2CD;">活动详情</text>
					<uni-icons type="right" color="#28C2CD" size="28rpx"></uni-icons>
				</view>
			</view>				
			<view class="video-box" v-if="item.video_list&&item.video_list.length>0">
				<zy-video 
					:ref="'videoRef'"
					:refi="'videoRef'"
					:width="utils.getpx(686)"
					:height="utils.getpx(386)"
					@playVideo="playVideo"
					:src="item.video_list[0]"></zy-video>
			</view>
			<view class="images-box" v-else>
				<image class="img" v-for="(path, i) in item.dstImgs" :key="i" :src="path" mode="aspectFill"></image>
			</view>
		</view>
		<view class="no-activity" v-if="activityList.length==0">
			暂无活动
		</view>
		
		<uni-load-more v-else :status="loadMore" :content-text="contentText"></uni-load-more>
	</view>
</template>
<script>
export default {
	data() {
		return {
			auditState: '', // 1 待审核 2是审核
			activityList: [], // 活动列表
            currentPage: 1, // 活动页码
            loadMore: 'more', // more获取更多数据 loading加载中 no-more 暂无更多数据 
			contentText: { // load-more 状态提示
				contentdown: ' ',
				contentrefresh: ' ',
				contentnomore: '没有更多啦~'
			},
		}   
	},
	onLoad(options){
		this.auditState = options.state
		this.getActivity()
	},
	methods: {
        // 处理头像展示
		headHandle(item){
			let info = {}
			info.avatarUrl = item.publicUserPic
			info.userType = item.publicUserType
			info.sex = item.publicUserSex
            // 返回头像链接
			return this.utils.headImage(info)
		},
        // 处理日期展示格式
		handleTime(time){
			time = time.split(' ')[0].split('-').join('.')
			return time
		},
		// 获取活动列表
		getActivity(){
            // state 0 待审核 1是审核
            let state = this.auditState - 1; 
			this.api.get('activity/getActivityPage', {
				haveMe: false,
				isExamine: true,
				state: state, 
				page: this.currentPage,
				limit: 10
			}).then(res=>{
				if(res.data.state != 'ok') return
				let activitiePage = res.data.activitiePage
				let list = activitiePage.list || []
                
                if(this.currentPage >= activitiePage.totalPage){
                    this.loadMore = 'no-more'
                }
				this.activityList = list
                // 处理文件展示
				for(let i=0; i<list.length; i++){
					if(list[i].files.length>5){
						this.handleFilesShow(list[i].files, i)
					}
					
				}
			})
		},
		// 活动审核
		activityAudit(item){
			uni.navigateTo({
				url: `/pages/teachers/activity-audit-details?id=${item.id}&state=${this.auditState}`
			})
		},
		// 获取显示图片的链接
		handleFilesShow(list, index){
			list = JSON.parse(list)
			let imgs = []
			for(let i=0; i<list.length; i++){
				imgs.push(`${this.api.xiaodeObsUrl}${list[i].path}`)
				
			}
			let obj = this.activityList[index]
			obj.dstImgs = imgs
			this.$set(this.activityList, index, obj)
		},
	}
}
</script>
<style lang="less" scoped>
.ac-item{
	margin-bottom: 20rpx;
	background-color: #fff;
	padding: 32rpx 32rpx 8rpx;
	color: #333333;
}
.info{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.active-type{
	font-size: 28rpx;color: #666666;
}
.user-info{
	display: flex;
	.head{
		width: 88rpx;
		height: 88rpx;
		border-radius: 44rpx;
	}
}
.name-time{
	margin-left: 24rpx;
	.name{
		display: block;
		line-height: 44rpx;
		
	}
	.time{
		margin-top: 12rpx;
		font-size: 24rpx;
		color: #999;
	}
}
.content{
	margin-top: 24rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	white-space: pre-line;
}
.cont-text{
	display: block;
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.images-box, .video-box{
	margin-top: 40rpx;
}
.images-box{
	
	image{
		width: 215rpx;
		height: 215rpx;
		border-radius: 20rpx;
		margin-right: 20rpx;
		margin-bottom: 24rpx;
		&:nth-child(3n){
			margin-right: 0;
		}
	}
}
.no-activity{
	height: calc(100vh - 320rpx);
	// #ifdef H5
	height: calc(100vh - 50px - 320rpx);
	// #endif
	display: flex;
	justify-content: center;
	align-items: center;
}
</style>